<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">
                
	<ui:define name="title"><h:outputText value="Please Sign Up" /></ui:define>
	<ui:define name="header"><h:outputText value="Please Sign Up" /></ui:define>
	
	<ui:define name="content">
		<h:form id="signUpForm">
			<p:fieldset styleClass="fieldset" legend="Registration Form">
			
				<p:messages id="messages" />
			
				<h:panelGrid id="regPanelGrid" style="margin: 0 auto; margin-top:25px; text-align: right;" cellspacing="8" columns="3">
						
					<h:panelGroup>
						<h:outputText value="First Name" />
						<h:outputText style="color:red;" value="*   " />
					</h:panelGroup>	
					<p:inputText id="firstName" value="#{user.firstName}"  required="true" label="First Name" title="Enter your First Name">
						<f:validateLength minimum="2" />
					</p:inputText>
					<p:tooltip for="firstName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />

					<h:panelGroup>
						<h:outputText value="Last Name" />
						<h:outputText style="color: red;" value="*   " />
					</h:panelGroup>
					<p:inputText id="lastName" value="#{user.lastName}" required="true" label="Last Name" title="Enter your Last Name" >
						<f:validateLength minimum="2" />
					</p:inputText>
					<p:tooltip for="lastName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
									
					<h:panelGroup>
						<h:outputText value="User Name:"/>
						<h:outputText style="color: red;" value="*   " />			
					</h:panelGroup>
					<p:inputText id="userName" value="#{user.userName}" required="true" label="User Name" title="Enter your User Name!" >
						<f:validateLength minimum="2" />
					</p:inputText>
					<p:tooltip for="userName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
					
					<h:panelGroup>
						<h:outputText value="Enter Password" />
						<h:outputText style="color: red;" value="*   " />
					</h:panelGroup>
					<p:password id="pass1" value="#{user.password}" required="true" label="Password" title="Enter your Password!" feedback="true" match="pass2">
						<f:validateLength minimum="2" />
					</p:password>
					<h:outputText value="" />
					
					<h:panelGroup>
						<h:outputText value="Repeat Password" />
						<h:outputText style="color: red;" value="*   " />
					</h:panelGroup>
					<p:password id="pass2" required="true" label="Repeat Password" title="Enter your Password again!" />
					<p:tooltip for="pass2" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
					
					<p:commandButton id="backToSignIn" action="backToSignIn" immediate="true"  icon="ui-icon-arrowreturnthick-1-w" value="Back to Sign Up" />
					<p:commandButton id="submitButton" action="confirmSignUp" update="regPanelGrid,messages" icon="ui-icon-check" value="Sign Up" />
				</h:panelGrid>
			</p:fieldset>
		</h:form>
	</ui:define>
           
</ui:composition>
